iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 24
0
Modern Web

試著把切版專案升級到 gulp4.0 吧系列 第 24

[試著把切版專案升級到 gulp4.0 吧] Day24 JS 的處理:談 gulp-concat

  • 分享至 

  • xImage
  •  

在網頁開發的歷史早期,若要使用第三方套件/函式庫的話,常常會使用 <script src="函式庫網址"></script> 的方式引入,像是 jQuery 的函式庫。

但有時候網頁開發,會使用到多個函式庫。如果全部的第三方函式庫都用 <script src="函式庫網址"></script> 的方式個別引入的話,就會多好幾次的 HTTP 請求、耗費較多的時間。

因此,有些開發者就會將需要的函式庫都先下載下來,然後複製到同一個 JS 檔案中,綁成一大包。不過手動複製貼上也是要花時間的,而 gulp-concat 可以幫我們代勞。

gulp-concat

這個套件的取名滿好懂的,concat 是 concatenate(連結 v)的前六字縮寫,在 Array.prototype.concat() 中也有用到它,所以對 JS 開發者不會太陌生。

使用的方式也不會很難,以下是 npm 頁面的範例

var concat = require('gulp-concat');
 
gulp.task('scripts', function() {
  return gulp.src('./lib/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'));
});

該範例會去抓在 ./lib/ 路徑底下的所以副檔名為 js 的檔案,之後把他們綑成一個 all.js 檔,將這個 all.js 檔放在 ./dist/ 路徑底下。

小結

今天是「JS 的處理」系列的第二天。明天會談到 gulp-babel,看它如何把 ES6+ 語法轉成 ES5 語法。

參考資料


上一篇
[試著把切版專案升級到 gulp4.0 吧] Day23 JS 的處理
下一篇
[試著把切版專案升級到 gulp4.0 吧] Day25 JS 的處理:談 gulp-babel
系列文
試著把切版專案升級到 gulp4.0 吧36
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言